<template>
  <el-input
      v-model="currentValue"
      :type="type"
      :placeholder="placeholder"
      :class="changeSt"
      :disabled="isdisabled"
      :suffix-icon="icon"
      :prefix-icon="prefixIcon"
      :autosize="autosize">
      <template v-if="isTmpl" :slot="slotType">{{content}}</template>
      <el-select v-if="isSelect" v-model="select" :slot="slotType" :placeholder="appendPlac">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button v-if="isSearch" :slot="slotType">Forget?</el-button>
    </el-input>
</template>


<script>
export default {
  name:'input',
  data() {
    return {
      currentValue: this.value,
      input: "你好",
      select: "",
      options: []
    };
  },
  props: {
    value: [String, Number],
    type: String,
    status: String,
    placeholder: String,
    size: String,
    groupType: String,
    slotType: String,
    content: String,
    label: String,
    prefixIcon: String,
    appendPlac: String,
    minRows: String,
    maxRows: String
  },
  computed: {
    changeSt: function() {
      var className = "input-value is-" + this.status + " " + this.size;

      switch (this.groupType) {
        case "select":
          className = className + " input-with-select";
          break;
        case "search":
          className = className + " input-width-forget";
          break;
      }
      if (this.type === "textarea") {
        className = className + " textarea";
      }
      return className;
    },
    isDisabled: function() {
      return this.status === "disabled";
    },
    isSelect: function() {
      return this.groupType === "select";
    },
    isSearch: function() {
      return this.groupType === "search";
    },
    isTmpl: function() {
      return this.groupType === "template";
    },
    icon: function() {
      if (this.status === "success") {
        return "el-icon-success";
      } else if (this.status === "error") {
        return "el-icon-error";
      }
    },
    autosize: function() {
      return {
        minRows: this.minRows,
        maxRows: this.maxRows
      };
    }
  },
  watch: {
    value(val, oldValue) {
      console.log(val);
      this.currentValue = val;
    }
  },
  created: function() {

  }
};
</script>

<style lang="scss">
@import '../assets/scss/variable.scss';
.input-whole {
  margin-top: 20px;
}
.input-key {
  // font-family: PingFangSC-Regular, Microsoft Yahei;
  font-size: 14px;
  color: $xy-text-color-primary;
  letter-spacing: 0;
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 30px;
}
.input-value {
  width: 224.8px;
  height: 34px;
  border-radius: 4px;
  background: #fff;
  color: $xy-text-color-regular !important;
  margin-top: 10px;
  input {
    height: 34px;
    line-height: 34px;
  }
  &:hover {
    box-shadow: 0 1 0 0 $xy-border-color-base inset, 0 -1 0 0 $xy-border-color-base inset,
      1 0 0 0 $xy-border-color-base inset, -1 0 0 0 $xy-border-color-base inset;
  }
  i {
    line-height: 34px;
    height: 100%;
    width: 25px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    &:after {
      display: block;
      width: auto;
    }
  }
}
.is-normal {
  input {
    box-shadow: 0 1 0 0 $xy-text-color-placeholder inset, 0 -1 0 0 $xy-text-color-placeholder inset,
      1 0 0 0 $xy-text-color-placeholder inset, -1 0 0 0 $xy-text-color-placeholder inset;
  }
}
.is-success {
  input {
    border: 1px solid $xy-color-success;
  }
}
.is-error {
  input {
    border: 1px solid $xy-color-danger;
  }
}
.is-disabled {
  input {
    background: #f2f5f6;
    border: 1px solid $xy-border-color-base;
    color: $xy-text-color-secondary !important;
  }
}
.input-width-forget .el-input-group__append {
  background: #fff;
  height: 34px;
  &::before {
    height: 20px;
    width: 1px;
    background-color: $xy-border-color-base;
    content: " ";
    position: absolute;
    left: -1px;
  }
}
.input-width-forget {
  input {
    border-right-color: #fff;
  }
}
.el-icon-success {
  color: #61c09f;
}
.el-icon-error {
  color: $xy-color-danger;
}
.small {
  width: 224.8px;
}
.large {
  width: 320px;
}
.textarea {
  height: auto;
}
</style>
